import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import {argTypesView} from "./helpers/helpers";

export const cardDocs= { source: { code: `card := component.NewCard([]component.TitleComponent{component.NewText("Card Title")})
  card.SetBody(component.NewText("Card text"))
  card.SetAlert(component.NewAlert(component.AlertStatusInfo, component.AlertTypeDefault, "Info alert", false, nil))
`}}

export const cardListDocs= { source: { code: `cardBody := component.NewText("Card body")
  card := component.NewCard(component.TitleFromString("Card 1"))
  card.SetBody(cardBody)
  cardList := component.NewCardList(name)
  cardList.AddCard(*card)`
}}

export const textView = {
  config: {
    value: 'Card Title',
  },
  metadata: {
    type: 'text',
  },
};

export const textView1 = {
  config: {
    value: 'Card 1',
  },
  metadata: {
    type: 'text',
  },
};

export const textView2 = {
  config: {
    value: 'Card 2',
  },
  metadata: {
    type: 'text',
  },
};


export const bodyView= {
  config: {
    value: 'Card text',
  },
  metadata: {
    type: 'text',
  },
};

export const alertConfig = {
  status: 'info',
  type: 'default',
  message: 'Info Alert'
};

export const cardView = {
  config: {
    body: bodyView,
    actions: null,
    alert: alertConfig,
  },
  metadata: {
    title: [textView],
    type: 'card',
  },
};

export const card2 = {
  config: {
    body: bodyView,
    actions: null,
    alert: null,
  },
  metadata: {
    title: [textView2],
    type: 'text',
  },
};

export const card1 = {
  config: {
    body: bodyView,
    actions: null,
    alert: null,
  },
  metadata: {
    title: [textView1],
    type: 'text',
  },
};

export const cardListView = {
  config: {
    cards: [card1, card2],
  },
  metadata: {
    type: 'cards',
  },
};

export const CardStoryTemplate = args => ({
  template: `<app-view-card [view]= "view"></app-view-card>`,
  argTypes: argTypesView,
  props: {view: args.view},
});

export const CardListStoryTemplate = args => ({
  template: `<app-view-card-list [view]= "view"></app-view-card-list>`,
  argTypes: argTypesView,
  props: {view: args.view},
});

<h1>Card and Card List component</h1>
<h2>Card component</h2>

<p>Card component consists of a title and a body containing one or more components.
Cards can also contain a footer that performs an action.</p>
<p>A Card component can optionally show an alert on the top of the component.</p>
<h2>Example</h2>

<Meta title="Components/Cards" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Card component"
         parameters={{ docs: cardDocs }}
         args= {{ view: cardView }}>
    { CardStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Card component" />

<h2>Card List component</h2>

<p>
Card List component contains a list of cards
</p>

<Canvas withToolbar>
  <Story name="Card List component"
         parameters={{ docs: cardListDocs }}
         args= {{ view: cardListView }}>
    { CardListStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Card List component" />
